﻿<template>
  <div>
  	<div class="breadcrumb">
			<el-breadcrumb separator="/" class="left">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button class="right" style="width: 88px; height: 36px; margin-top: -10px;" @click="$router.go(-1)">返回</el-button>
		</div>
		<!--主体内容-->
		<div class="content">
	  	<TitleModule :title="'系统用户基本信息'" :hasIcon="true"></TitleModule>
	  	<InfoList :infoData="infoData" :infoSize="20" :infoDetail="infoDetail"></InfoList>
	  </div>
  </div>
</template>

<script>
import TitleModule from '../../components/titleModule/titleModule'
import InfoList from '../../components/infoList/infoList'
import {
		getData
	} from '../../common/js/public.js'
export default {
  data () {
    return {
    	infoDetail: {},
    	infoData: [{    		
					label: '用户编码',
					value: 'userCode'
				}, {
					label: '登录名',
					value: 'userName'				
    		}, {    		
					label: '真实姓名',
					value: 'realName'
				}, {
					label: '性别',
					value: 'sex',
					formatter: (val) => {
						if (val == 0) {
							return '男';
						} else {
							return '女';
						}
					}
    		}, {
					label: '电话',
					value: 'phone'				
    		}, {
					label: '邮箱',
					value: 'email'				
    		}, {
					label: '地址',
					value: 'address'				
    		}, {
					label: '用户状态',
					value: 'userStatus',
					formatter: (val) => {
						if (val == 0) {
							return '在职';
						} else {
							return '离职';
						}
					}				
    		}, {
					label: '是否是管理员',
					value: 'isAdmin',
					formatter: (val) => {
						if (val == 0) {
							return '否';
						} else {
							return '是';
						}
					}				
    		}, {
					label: '绑定角色',
					value: 'roleList'				
    		}]
    }
  },
  components: {
  	TitleModule,
  	InfoList
  },
  methods: {
  	getDetail () {
  		let opt = {
					url: '/gplus/user/query',
					data: {
						userId: this.$route.query.userId
					},
					success: (res) => {
						this.infoDetail = res.data.UserVO;
						this.getRole();
					}
			};
			getData(opt);
  	},
  	getRole () {
  		let opt = {
					url: '/gplus/role/queryUserRoleList',
					data: {
						userId: this.$route.query.userId
					},
					success: (res) => {
						let data = res.data.RoleVO;
						let roleList = [];						
						data.forEach((item) => {
							roleList.push(item.roleName);
						});
						this.$set(this.infoDetail, 'roleList', roleList.toString())					
//							this.infoDetail.roleList = roleList.toString();	
						console.log(this.infoDetail)
					}
			};
			getData(opt);
  	}
  },
  created () {
  	console.log(this.$route.query);
  	this.getDetail();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 20px;
	margin-bottom: 20px;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	border: 1px solid #C0CCDA;
	border-radius: 4px;
	padding: 20px;
</style>
